<!-- Vue SFC -->
<template>
  <div id='app'>
    <van-tabbar>
      <van-tabbar-item @click="sure">确定</van-tabbar-item>
      <van-tabbar-item @click="back">返回</van-tabbar-item>
    </van-tabbar>
    <div style=" width:100%; height:500px ;overflow: auto; font-size: 18px;">
      <treeselect :options="options" :multiple="true" :flatten-search-results="false" placeholder="人员" v-model="value" :value-consists-of="valueConsistOf" :showCount="showCount" :showCountOf="showCountOf" :alwaysOpen="alwaysOpen" :openOnFocus="openOnFocus" :maxHeight="maxHeight" :searchable="false" :defaultExpandLevel=1 />
    </div>

  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)
export default {
  // register the component
  components: { Treeselect },
  data () {
    return {
      // define the default value
      value: [],
      returnvalue: [],
      showCount: true,
      showCountOf: 'LEAF_DESCENDANTS',
      alwaysOpen: true,
      flat: true,
      openOnFocus: true,
      maxHeight: 500,
      // define options
      options: [],
      emp: [],
      valueConsistOf: 'LEAF_PRIORITY'
    }
  },

  mounted: function () {
    //console.log(this.$route.params.valuehidden1)
    if (this.$route.params.valuehidden1) {
      this.value = this.$route.params.valuehidden1.substring(0, this.$route.params.valuehidden1.length - 1).split(';')
      //console.log(this.value)
      //console.log('wanshi')
    }
    //console.log('start created')
    this.axios({
      method: 'get',
      url: '/api/' + this.idobject + '.idownermulti.do'
    }).then(res => {
      //console.log(res)
      this.options = JSON.parse(res.data.treedata)
      this.emp = JSON.parse(res.data.empdata)
    }).catch(res => {
      this.reserror(res)
    })
  },
  methods: {
    sure () {
      this.returnvalue = this.value
      //console.log(this.value)
      let refid = ''
      // let refval = ''
      for (let i = 0; i < this.value.length; i++) {
        for (let j = 0; j < this.emp.length; j++) {
          if (this.emp[j].id === this.value[i]) {
            refid += this.value[i] + ';'
            // refval += this.emp[j].label + ' '
          }
        }
      }
      // 回写
      // this.$toast(item.id + '-->' + item.title)
      // this.$route.params.datamodel.viewcondition_value = refval

      this.$route.params.obj.conditionValHidden = refid
      // Vue.set(this.$route.params.datamodel, 'viewcondition_value', refval)
      Vue.set(this.$route.params.datamodel, 'viewcondition_value', refid)
      //console.log('datamodel2:' + JSON.stringify(this.$route.params.datamodel))
      this.$router.go(-1)
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style>
.vue-treeselect__multi-value-item {
  cursor: pointer;
  display: inline-table;
  background: #e3f2fd;
  padding: 2px 0;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #039be5;
  font-size: 18px;
  vertical-align: top;
}

.vue-treeselect--open.vue-treeselect--open-below .vue-treeselect__control {
  display: none;
}
</style>
